<script lang="ts" setup>
import { ref } from 'vue'
import RecordReplays from '@/pages/deduct/components/check/recordReplays.vue'
import SituationInfo from '@/pages/deduct/components/check/situationInfo.vue'
defineOptions({
  name: "DeductCheck"
})

const scrollWrapper = ref<HTMLElement | null>(null)
const taskModeMap = ref<string>()
const roundNumber = ref<string>()
const getTaskCollectData = (data: any) => {
  taskModeMap.value = data.taskModeMap
  roundNumber.value = data.roundNumber
}
const handleScroll = () => {
  // 点击查看滚动条触底
  const el = scrollWrapper.value
  if (!el) return
  el?.scrollTo({ top: el.scrollHeight, behavior: 'smooth' })
}
</script>

<template>
  <div class="steps-wrapper" ref="scrollWrapper">
    <recordReplays @getTaskCollectData="getTaskCollectData" @handleScroll="handleScroll"/>
    <SituationInfo :taskModeMap="taskModeMap || ''" :roundNumber="roundNumber || ''" />
  </div>
</template>

<style lang="scss" scoped>
.steps-wrapper {
  // max-height: 100vh;
  overflow-y: auto;    /* 容器最大高度 */
  overflow-x: hidden;
}

.steps-wrapper::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

// 滚动条上的滚动滑块
.steps-wrapper::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: #90939955;
}

.steps-wrapper::-webkit-scrollbar-thumb:hover {
  background-color: #90939977;
}

.steps-wrapper::-webkit-scrollbar-thumb:active {
  background-color: #90939999;
}

// 当同时有垂直滚动条和水平滚动条时交汇的部分
.steps-wrapper::-webkit-scrollbar-corner {
  background-color: transparent;
}
</style>
